<template class="dashboard-container">
    <div>
        <div style="margin-top: 15px; margin-left: 30px;">
            <h3>添加</h3>
        </div>
        <el-radio-group v-model="formLabelAlign" size="small">
        </el-radio-group>
        <div style="margin: 20px;">
            <el-form label-width="80px" style="width: 50%;">
                <el-form-item label="账号">
                    <el-input v-model="formLabelAlign.account" class="size"></el-input>
                    <label style="margin-left: 90px;">名称：</label>
                    <el-input v-model="formLabelAlign.name" class="size"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="formLabelAlign.age" class="size"></el-input>
                    <label style="margin-left: 90px;">性别：</label>
                    <el-input v-model="formLabelAlign.gender" class="size"></el-input>
                </el-form-item>

                <el-form-item label="账号权限" :label-width="formLabelWidth">
                    <el-select v-model="formLabelAlign.role" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <label style="margin-left: 78px;" >电话号码：</label>
                    <el-input v-model="formLabelAlign.number" class="size" style="margin-left: 365px; margin-top: -200px;" ></el-input>
                </el-form-item>

                
                    
                
               

            </el-form>
            <el-button type="primary" @click="add()">确 定</el-button>
            <el-button type="primary">取 消</el-button>
        </div>
    </div>
</template>
<script>
import { selectById,addUser} from '@/api/UserManage'
export default {
    data() {
        return {
            labelPosition: 'left',
            formLabelAlign: {
                role:'用户'   
            },
            options: [{
                    value: '用户',
                    label: '用户'
                }, {
                    value: '管理员',
                    label: '管理员'
                } ]
        }
    },

    created() {
        this.sel()
    },

    methods: {
        //图书信息查询
        sel() {
            this.res = this.$route.query.id
            selectById(this.$route.query.id).then(res => {
                this.formLabelAlign = res.data.data
            })
        },

            add() {
            addUser(this.formLabelAlign).then(res => {
          //修改成功
          this.$message.success("恭喜你，修改成功");
          //重新查询数据
          this.$router.push('/user/UserManage');
      })
    },

    }
}
</script>
<style>
.size {
    height: 100%;
    width: 35%;
}

/* 背景颜色渐变 */
.background-color {
    background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
    height: 100%;

}

.size {
    height: 100%;
    width: 35%;
}
</style>